<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>下拉框示例</title>
	 <link rel="stylesheet" type="text/css" href="../../dist/css/hisui.min.css">
    <script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
    <script src="../jquery-tag-demo.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../dist/js/jquery.hisui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../demo.css">
</head>
<body>
	<h2>组合框</h2>
    <h3>说明:</h3>
	<span>组合（combo）是在 html 页面上显示一个可编辑的文本框和下拉面板。它是用于创建其他复杂的组合组件（比如：组合框 combobox、组合树 combotree、组合网格 combogrid，等等）的基础组件。</span>
	<br>
	<p>组合（combo）可以使用 javascript 从 &lt;select&gt; 或 &lt;input&gt; 元素进行创建。请注意，<span style="color:red;">从标记创建组合（combo）是无效的</span>。</p>
    <h3>如：</h3>
    <div class="demo-exp-code entry-content">
		<div class="use-prettyprint">
			<input id="cc" placeholder="空面板">
			<script type="text/javascript">
				$(function(){
					var ccObj=$HUI.combo('#cc',{});
				});
			</script>
		</div>
	</div>
	<div class="demo-exp-code entry-content">
		<div class="use-prettyprint">
			<style>
				#sp label.item{
					padding: 5px 10px;
					display: block;
				}
				#sp label.item:hover{
					background-color:#dbecf8 ;
				}
			</style>
			<select id="cc2"></select>
			<div id="sp">
				<div class="header" style="background:#f5f5f5;padding:5px;">Select a language</div>
				<div class="body">
					<label class="item" value="java">Java语言</label>
					<label class="item" value="ruby">Ruby语言</label>
					<label class="item" value="basic">Basic语言</label>
					<label class="item" value="cache">Cache语言</label>
					<label class="item" value="html">结构化查询语言</label>
					<label class="item" value="css">层叠样式表</label>
				</div>
			</div>
		</div>
			<script type="text/javascript" class="use-prettyprint">
				$(function(){
					var cc2Obj=$HUI.combo('#cc2',{editable:false,placeholder:'自定义下拉面板'});
					$('#sp').appendTo(cc2Obj.panel());
					$('#sp label').click(function(){
						var l = $(this).html();
						var v = $(this).attr('value');
						cc2Obj.setValue(v);
						cc2Obj.setText(l);
						cc2Obj.hidePanel();
						console.log(cc2Obj.getValue());
					});
				});
			</script>
	</div><!--demo-exp-code entry-content-->
	
    <table class="table">
		<tr class="protitle">
			<th>属性</th>
			<th>说明</th>
			<th>默认值</th>
			<th></th>
		</tr>
		<tr>
			<td>enterNullValueClear</td>
			<td>默认值true。当为false时，在输入框内回车，没有匹配值不清空输入框。</td>
			<td>true</td>
			<td></td>
		</tr>
		<tr>
			<td>placeholder</td>
			<td>默认值""</td>
			<td>当不为空时，在输入框显示placeholder,<code>IE9+</code>,<code>chrome</code>支持。</td>
			<td></td>
		</tr>
	</table>
  <prettyprint/>
</body>
</html>